<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 300px;
      height: 300px;
    }
    #box1 {
      background-color: hotpink;
    }
    #box2 {
      background-color: green;
    }
  </style>
</head>

<body>
  <script>
    /* 
      冒泡排序：
        
    
    */
    var arr = [101, 34, 21, 54, 65, 32, 11, 9]
    // console.log("排序前：", arr)
    // // 1、定义循环列出比较的次数，两两比较，次数少一次，所以-1
    // for (var i = 0; i < arr.length - 1; i++) {
    //   // 2、定义循环列出比较的次数，两两比较，
    //   for (var j = 0; j < arr.length - i - 1; j++) {
    //     // 3、关键的比较交换的部分
    //     /* 
    //       arr[j] 表示当前位置的值  
    //       arr[j+1] 表示当前位置的下一个位置元素        
    //     */
    //     if (arr[j] > arr[j + 1]) {
    //       var temp = arr[j]
    //       arr[j] = arr[j + 1]
    //       arr[j + 1] = temp
    //     }
    //   }
    // }
    // console.log("排序后：", arr)


    var arr1 = [99, 100, 98, 97, 96, 95, 94]
    var arr2 = [1,2,3,4,5];
    for(var i = 0; i < arr1.length - 1; i++) {
      /* 
        定义boo变量，作用表示假设全部排序比较完成了
      */
      var boo = true;
      for(var j = 0; j < arr1.length - i - 1; j++) {
        if(arr1[j] < arr1[j + 1]) {
            var temp = arr1[j]
            arr1[j] = arr1[j + 1]
            arr1[j + 1] = temp
            // 将boo改为false，表示一轮比较没完成
            boo = false;
        }
      }
      console.log("第" + j + "轮比较：", arr1);
      // 如果boo状态为true，表示第一轮比较就比完了
      if(boo) break;  // 如果完成了（boo值为true），就跳出循环
    }


    /* 
      概念讲解：
        true === true ==> true
    */
    // console.log(true === true); // true
    // var a = true;
    // if(a) {
    //   console.log(a);
    // }
  </script>
</body>

</html>